<template>
  <div class="main-aside min-width-1200">
    <div class="content-page-wrap " :style="{paddingLeft:hasRightSide?'240px':'120px'}">
      <div class="content-page">
        <router-view/>
      </div>
    </div>
    <div class="main-aside-content">
      <left-side :active-index="activeIndex.parent" :menus="menus"/>
      <transition name="fade-transform">
        <right-side v-if="hasRightSide" class="right-side" :parent="parentMenu" :active-index="activeIndex.child"/>
      </transition>
    </div>
    <div
      class="top-menu-wrap"
      :style="{width:'calc(100% - '+(hasRightSide?'240px':'120px') +')',left:hasRightSide?'240px':'120px'}">
      <transition name="breadcrumb">
        <top-menu/>
      </transition>
    </div>
    <permission-expire-modal/>
  </div>
</template>

<script>
  import Logo from './logo'
  import LeftSide from './left-side'
  import RightSide from './right-side'
  import TopMenu from './top-menu'
  import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
  import { mapState } from 'vuex'
  import PermissionExpireModal from '@/perm/components/PermissionExpireModal'

  export default {
    components: {
      RightSide,
      LeftSide,
      Logo,
      TopMenu,
      PermissionExpireModal
    },
    data () {
      return {
        menus: []
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.addRouters
      }),
      activeMenu () {
        const route = this.$route
        const { meta, path } = route
        // if set path, the sidebar will highlight the path you set
        // 如果有设置显示菜单，则使用显示菜单的值
        if (meta.menu) {
          return meta.menu
        }
        return path
      },
      activeIndex () {
        // 通过path查找对应父级index
        for (let i = 0; i < this.menus.length; i++) {
          const parent = this.menus[i]
          if (parent.children) {
            for (let j = 0; j < parent.children.length; j++) {
              const child = parent.children[j]
              // 第三级叶子节点
              if (child.children) {
                for (let k = 0; k < child.children.length; k++) {
                  const leaf = child.children[k]
                  // eslint-disable-next-line max-depth
                  if (leaf.path === this.activeMenu) {
                    return { parent: i, child: j, leaf: k }
                  }
                }
              } else {
                if (child.path === this.activeMenu) {
                  return { parent: i, child: j }
                }
              }
            }
          }
        }
        return null
      },
      parentMenu () {
        return this.menus[this.activeIndex.parent] || {}
      },
      children () {
        const parent = this.parentMenu
        if (parent && parent.children) {
          return parent.children
        } else {
          return []
        }
      },
      hasRightSide () {
        const parent = this.menus[this.activeIndex.parent]
        return parent.meta && parent.meta.sticky !== false
      }
    },
    created () {
      const routes = this.mainMenu.find(item => item.path === '/')
      this.menus = (routes && routes.children) || []
      // 处理侧栏收起状态
      this.$watch('collapsed', () => {
        this.$store.commit(SIDEBAR_TYPE, this.collapsed)
      })
      this.$watch('isMobile', () => {
        this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
      })
    }
  }
</script>
<style lang="less" scoped>
  .main-aside {
    position: relative;
    min-height: 100%;
    background-color: #f5f5f5;
  }

  .main-aside-content {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 100;
  }

  .content-page-wrap {
    position: relative;
    box-sizing: border-box;
    padding-top: 64px;
    height: 100%;
  }

  .content-page {
    box-sizing: border-box;
    padding: 16px;
    height: 100%;
  }

  .top-menu-wrap {
    position: fixed;
    top: 0;
    height: 64px;
    z-index: 99;
    transition: 0.3s;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-enter-active {
    transition: all .3s ease;
  }

  .slide-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-enter, .slide-leave-to {
    width: 0;
  }
</style>
